
<template>
  <div>
    <!-- <div class="page-header flex align-center space-between">
      <div class="font-weight--lg font-size--lg"></div>
     
    </div> -->

    <div class="page-body">
      <div class="full-width" id="mul_select">
        <el-form size="small" :model="queryForm" ref="queryFormRef" :inline="true">
          <el-form-item label="昵称：">
            <el-input size="small" v-model.trim="queryForm.search" placeholder="请输入昵称" clearable></el-input>
          </el-form-item>
          <el-form-item label="手机号码：">
            <el-input size="small" v-model.trim="queryForm.phone" placeholder="请输入手机号码" clearable></el-input>
          </el-form-item>
          <el-form-item label="申请时间：">
            <el-date-picker size="small" v-model="dateTime" type="daterange" value-format="yyyy-MM-dd" range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期"></el-date-picker>
          </el-form-item>
          <el-form-item label="申请状态：">
            <el-select size="small" v-model="queryForm.status" placeholder="请选择状态" clearable>
              <el-option v-for="item in statusDataList" :key="'status' + item.value" :label="item.name" :value="item.value"/>
            </el-select>
          </el-form-item>
          <el-form-item>
            <el-button size="small" type="primary" class="width_104" @click="getPageDataList">查询</el-button>
            <el-button size="small" class="width_104" @click="resetOption">重置</el-button>
          </el-form-item>
        </el-form>
      </div>
      <div>
        <el-button size="mini" type="success" icon="el-icon-document-add" @click="statusChangeAll(1)" >批量同意</el-button>
        <el-button size="mini"  type="danger" icon="el-icon-delete" @click="statusChangeAll(2)">批量拒绝</el-button>
      </div>
      <el-table class="margin_top_20" :data="pageData" v-loading="loading" stripe :header-cell-style="tableHeaderStyle" @selection-change="handleSelectionChange">
        <el-table-column type="selection" width="42" :selectable="checkSelect"></el-table-column>
        <el-table-column label="序号" type="index"></el-table-column>
        <el-table-column label="头像">
          <template slot-scope="scope">
            <img :src="baseImgUrl + '/' + scope.row.headUrl" class="shop_avator" v-if="scope.row.headUrl">
          </template>
        </el-table-column>
        <el-table-column prop="name" label="昵称"></el-table-column>
        <el-table-column prop="phone" label="手机号码"></el-table-column>
        <el-table-column prop="inviteNum" label="邀请人数（人）"></el-table-column>
        <el-table-column prop="consumeNum" label="消费次数（次）"></el-table-column>
        <el-table-column prop="consumeMoney" label="消费金额（元）"></el-table-column>
        <el-table-column prop="createTime" label="申请时间"></el-table-column>
        <el-table-column prop="auditStatus" label="审核状态">
          <template slot-scope="scope">
            <span>{{scope.row.auditStatus | statusToTag}}</span>
          </template>
        </el-table-column>
        <el-table-column label="操作" width="220">
          <template slot-scope="scope" v-if="scope.row.auditStatus == 0">
            <el-button size="mini" type="primary" @click="statusChangeOne(scope.row.id, 1)">同意</el-button>
            <el-button size="mini" type="danger" @click="statusChangeOne(scope.row.id, 2)">拒绝</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>

    <div class="text-center">
      <el-pagination background @size-change="handleSizeChange" @current-change="handlePagingChange" :current-page="pageIndex" :page-sizes="pageSizes"
        :page-size="pageSize" :layout="paginationLayout" :total="pageCount">
      </el-pagination>
    </div>
  </div>
</template>

<script>
  import Setting from '@/settings';
  import { GetShareAuditList, UpdateShareAuditStatus, UpdateShareAuditBatchStatus } from '@/views/shared-management/services/index';

  export default {
    data() {
      return {
        statusDataList: [
          { name: '待审核', value: 0 },
          { name: '通过', value: 1 },
          { name: '拒绝', value: 2 }
        ],
        queryForm: {
            search: '',
            phone: '',
            status:	'',
            startTime: '',
            endTime: ''
        },
        dateTime: [],
        pageData: [],
        pageCount: 0,
        pageIndex: 1,
        loading: false,
        multipleSelection: [],
        pageSize: Setting.defaultTablePaginationSize,
        pageSizes: Setting.tablePaginationSizes,
        tableHeaderStyle: Setting.tableHeaderStyle,
        paginationLayout: Setting.tablePaginationLayout,

        baseImgUrl: process.env.VUE_APP_FILE_URL,
      }
    },
    watch: {
      dateTime(value) {
        if (!value) {
            this.queryForm.startTime = '';
            this.queryForm.endTime = '';
        }
        if(value.length > 0) {
            this.queryForm.startTime = value[0];
            this.queryForm.endTime = value[1];
        }
      }
    },
    filters:{
      statusToTag(value){
        switch(value) {
          case 1:
            return  '通过';
          case 2:
            return  '拒绝';
          default:
            return  '待审核';
        }
      }
    },
    methods: {
      checkSelect(rowData) {
          if (rowData.auditStatus == 0) {
              return true;
          }
          return false;
      },
      statusChangeOne(rowId, status) {
        UpdateShareAuditStatus({
            'id': rowId,
            'auditStatus': status,
            'update_id': JSON.parse(this.$store.getters.userInfo).id ? JSON.parse(this.$store.getters.userInfo).id : '1'
        })
        .then(data => {
            if(data.code == 200){
                this.$message.success('审核成功!');
                this.getPageDataList();
            } else {
                this.$message.error('审核失败!');
            }
        })
      },
      statusChangeAll(status) {
        if (!this.multipleSelection.length) {
          this.$message.warning('请选择需要审核的分享客!');
          return;
        }
        UpdateShareAuditBatchStatus({
          'targetIds': this.multipleSelection.map(item => item.id).join(','),
          'status': status,
        })
        .then(res => {
          if (res.code == 200) {
            this.$message.success('审核成功!');
            this.getPageDataList();
          }else{
            this.$message.error('审核失败!');
          }
        })
      },
      handleSelectionChange(event) {
        this.multipleSelection = event;
      },
      // 分页操作
      handlePagingChange(event) {
        this.pageIndex = event;
        this.getPageDataList();
      },
      handleSizeChange(event) {
        this.pageIndex = 1;
        this.pageSize = event;
        this.getPageDataList();
      },
      // 获取页面数据
      getPageDataList() {
        this.loading = true;
        GetShareAuditList({
            ...this.queryForm,
            pageNum: this.pageIndex,
            pageSize: this.pageSize
        })
        .then(data => {
            this.loading = false;
            if (data.code != 200) {
                this.$message.error('加载失败，请重新刷新列表');
                return;
            }
            this.pageData = data.data.list;
            this.pageCount = data.data.total;
        })
        .catch(error => {
            this.loading = false;
            this.$message.error(error);
        })
      },
      resetOption() {
        this.queryForm.search = '';
        this.queryForm.phone = '';
        this.queryForm.status = '';
        this.queryForm.startTime = '';
        this.queryForm.endTime = '';
        this.dataTime = [];
        this.pageIndex = 0;
        this.getPageDataList();
      }
    },
    created() {
        this.getPageDataList();
    }
  }
</script>

<style lang="scss" scoped>
.shop_avator {
  width: 64px;
  height: 64px;
  vertical-align: middle;
  border-radius: 50%;
}

.width_104 {
  width: 104px;
}
</style>
